use euiFocusBackgroundColor for EuiFacetButton :focus #2365
Conversation
|
I wasn't sure if I needed to complete everything in the Checklist for a simple 1 liner CSS change. |
There was a problem hiding this comment.
I know this is small, but don't forget to add a changlog item. Just add a new line under master. Then you should be safe to merge. As a suggestion, If you wanted to be clever, my guess is that you could use a CSS outline to mimic "padding" so that the focus state wasn't flush to the text. This could be more trouble than it's worth, but it's a trick i've used when the focused element looked weird because of the lack of padding.
| background-color: $euiColorLightestShade; | ||
| background-color: $euiFocusBackgroundColor; | ||
| // use box-shadow as a "faux outline" to apply left/right padding only | ||
| box-shadow: -4px 0 $euiFocusBackgroundColor, 4px 0 $euiFocusBackgroundColor; |
There was a problem hiding this comment.
We also have variables for pixel values that you'll want to use
| box-shadow: -4px 0 $euiFocusBackgroundColor, 4px 0 $euiFocusBackgroundColor; | |
| box-shadow: (-$euiSizeXS) 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor; |
|
Oh whoops, looks like you've got a CL conflict. Be sure to rebase before merging. |
|
Ok I think this is ready! One note: when testing in Firefox I noticed a dotted grey border while tab focusing (see screenshots below). Since this behavior occurs on multiple EUI components and not just EuiFacetButton, we may want to create a separate issue if we want to "normalize" this style. Perhaps something like:
|
* use for EuiFacetButton :focus * Updated changelog * removed trailing whitespace * fixed indentation * fixed my mistake / leftover code * use euiSizeXS instead of px value
Summary
To date, most usage of
EuiFacetButtonin Kibana has been done on a white background. With the upcoming Integrations project, we have plans to include this against a light grey background ($euiPageBackgroundColor). The button's focus state is difficult to see when on an off-white background. This PR modifiesEuiFacetButton's:focusstate to use a light blue background instead of light grey. We use this color elsewhere in EUI such as when focusing on tabs.Screenshots
Before
After
Checklist
Props have proper autodocsAdded documentation examplesAdded or updated jest testsChecked for breaking changes and labeled appropriately